<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>直播管理</title>
	<link rel="stylesheet" href="/css/elementui/index.css">
	<link rel="stylesheet" href="/css/exam/css/style.css">
	<link rel="stylesheet" href="/iconfont/iconfont.css">
  <style>
    #app .button a {
      text-decoration: none;
      color: aliceblue;
    }

    ;
  </style>
  <style updated_at="text/css">
    .el-table th.el-table__cell>.cell {
      text-align: center !important;
    }

    ;
  </style>
</head>

<body>
  <!-- 直播管理 -->
  <div id="app">
  <div class="p-30">
      <div class="button">
        <el-button type="primary" @click="increase()" icon="el-icon-plus">生成推流地址</el-button>
      </div><br>
      <!-- Form Page -->
      <div class="fromPage">
        <el-table :header-cell-style="{ background: '#f1f2f9' }" :fit="true" ref="multipleSelection" :data="indexData" tooltip-effect="dark" style="width: 100%"  v-loading="loading">
          <el-table-column prop="id" label="ID" show-overflow-tooltip width="120">
          </el-table-column>
          <el-table-column label="推流地址" width="440">
				<template slot-scope="scope">
					<span style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:350px;float:left;margin-right:10px;">@{{scope.row.push_url}}</span>
					<el-button size="mini" type="primary" @click="copy(scope.row.push_url)">复制</el-button>
				</template>
          </el-table-column>
          <el-table-column prop="count" label="观看人数" align="center">
          </el-table-column>
          <el-table-column prop="created_at" label="发布时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="updated_at" label="更新时间" show-overflow-tooltip>
          </el-table-column>
          </el-table-column> -->
        </el-table>
      </div>
    <!-- Pager -->
      <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10,20,50,100]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="count">
            </el-pagination>
        </div>
  </div>
  </div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        formData: {
          id: '',
          push_url: '',
          user_id: '',
          created_at: '',
          updated_at: '',
        },
        //控制loading加载
        loading: false,
        indexData: {
          id: '',
          push_url: '',
          user_id: '',
          created_at: '',
          updated_at: '',
          token: localStorage.getItem('logintoken')
        },
        indexData: [], //题库列表数据
        sels: [], //当前选框选中的值
        currentPage: 1, // 当前页码
        count: 10, // 总条数
        pageSize: 10, // 每页的数据条数
      }
    },
    created() {
      this.tableData(),
      this.getResults()

    },
    updated() {
      //在数据更新的时候存进缓存

    },
    methods: {
		copy(text){
			var element = this.createElement(text);
			element.select();
			element.setSelectionRange(0, element.value.length);
			document.execCommand('copy');
			element.remove();
			this.$message({
			  type: 'success',
			  message: '已复制到剪切板'
			});
		},
		createElement(text) {
			var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
			var element = document.createElement('textarea');
			// 防止在ios中产生缩放效果
			element.style.fontSize = '12pt';
			// 重置盒模型
			element.style.border = '0';
			element.style.padding = '0';
			element.style.margin = '0';
			// 将元素移到屏幕外
			element.style.position = 'absolute';
			element.style[isRTL ? 'right' : 'left'] = '-9999px';
			// 移动元素到页面底部
			let yPosition = window.pageYOffset || document.documentElement.scrollTop;
			element.style.top = `${yPosition}px`;
			//设置元素只读
			element.setAttribute('readonly', '');
			element.value = text;
			document.body.appendChild(element);
			return element;
		},
      //表格取消按钮
      cancelForm() {
        this.loading = false;
        this.showDrawer = false;
        clearTimeout(this.timer);
      },
      //生成
      increase() {
        axios.post('/admin/video/push', {})
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '保存成功！'
              });
              this.tableData()
            } else {
              this.$message({
                type: 'info',
                message: '保存失败！'
              })
            }
          })
      },
      getResults() {
        this.loading = true
        axios.get('/admin/video/pushList', {
            params: {
              limit: this.pageSize,
              page: this.currentPage,
            }
          })
          .then(res => {
            console.log('请求成功：', res.data.data);
            this.indexData = res.data.data;
            this.count = res.data.count;
            this.loading = false;
            
          }).catch(error => {
            console.log('请求失败：' + error);
            this.loading = false;
          })
      },
      //表格数据
      tableData() {
        axios.get('/admin/video/pushList', {})
          .then(res => {
            console.log('请求成功：', res.data.data);
            this.indexData = res.data.data;
			this.count = res.data.count;
			this.loading = false;
            // console.log(res.data.data);
            // console.log(this.indexData);
          }).catch(error => {
            console.log('请求失败：' + error);
          })
      },
      // 分页器功能
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
        this.getResults();
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getResults();
      },
    }
  })
</script>
<style scoped>
  a{color:#409EFF;text-decoration: none;}
  .el-table .el-table__cell:first-child{text-align: center;}
</style>
</html>